/*
 * @Author: June
 * @Date: 2022-11-15 09:19:30
 * @LastEditors: 无处安放的六月
 * @LastEditTime: 2023-12-06 14:23:27
 * @Description: 封装指令
 *
 */
import Vue from 'vue'
// v-dialogDrag: 弹窗拖拽`
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    // 弹框可拉伸最小宽高
    const minWidth = 400
    const minHeight = 200
    // 初始非全屏
    let isFullScreen = false
    // 当前宽高
    let nowWidth = 0
    // 当前顶部高度
    let nowMarginTop = 0
    // 获取弹框头部（这部分可双击全屏）
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    // 弹窗
    const dragDom = el.querySelector('.el-dialog')
    let flag = true
    /** 是否有添加全屏属性 如果有 那么禁用全屏/缩放功能 */
    dragDom.classList.forEach((item) => {
      if (item === 'is-fullscreen') {
        flag = false
      }
    })
    if (flag) {
      // 给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
      dragDom.style.overflow = 'auto'
      // 清除选择头部文字效果
      dialogHeaderEl.onselectstart = new Function('return false')
      // 头部加上可拖动cursor
      dialogHeaderEl.style.cursor = 'move'
      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
      const sty = (function() {
        if (window.document.currentStyle) {
          return (dom, attr) => dom.currentStyle[attr]
        } else {
          return (dom, attr) => getComputedStyle(dom, false)[attr]
        }
      })()
      const moveDown = (e) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - dialogHeaderEl.offsetLeft
        const disY = e.clientY - dialogHeaderEl.offsetTop

        const screenWidth = document.body.clientWidth // body当前宽度
        const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)

        const dragDomWidth = dragDom.offsetWidth // 对话框宽度
        const dragDomheight = dragDom.offsetHeight // 对话框高度

        const minDragDomLeft = dragDom.offsetLeft
        const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

        const minDragDomTop = dragDom.offsetTop
        const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight

        // 获取到的值带px 正则匹配替换
        let styL = sty(dragDom, 'left')
        let styT = sty(dragDom, 'top')

        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        if (styL.includes('%')) {
          /* eslint-disable */
            styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
            styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
          } else {
            styL = +styL.replace(/\px/g, '')
            styT = +styT.replace(/\px/g, '')
          }
  
          document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离
            let left = e.clientX - disX
            let top = e.clientY - disY
  
            // 边界处理
            if (-left > minDragDomLeft) {
              left = -minDragDomLeft
            } else if (left > maxDragDomLeft) {
              left = maxDragDomLeft
            }
  
            if (-top > minDragDomTop) {
              top = -minDragDomTop
            } else if (top > maxDragDomTop) {
              top = maxDragDomTop
            }
  
            // 移动当前元素
            dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
          }
  
          document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
          }
          return false
        }
        dialogHeaderEl.onmousedown = moveDown
        //双击头部效果
        let nowHight = 0
        dialogHeaderEl.ondblclick = (e) => {
          let sildeWith = 200
          // if (
          //   Cookies.get('sidebarStatus') == 1 ||
          //   !Cookies.get('sidebarStatus')
          // ) {
          //   sildeWith = 200
          // } else {
          //   sildeWith = 50
          // }
  
          var model = document.body.querySelector('.v-modal')
          var dragDomBox = document.body.querySelector('.el-dialog__wrapper')
          const menuWidth =
            document.body.querySelector('.sidebar-container').offsetWidth
          if (isFullScreen == false) {
            // model.style.display = 'none'
            nowHight = dragDom.clientHeight
            nowWidth = dragDom.clientWidth
            nowMarginTop = dragDom.style.marginTop
            dragDom.style.marginTop = 0
            dragDom.style.marginBottom = 0
            dragDom.style.left = `${sildeWith / 2}px`
            dragDom.style.top = '70px'
            dragDom.style.height = 'calc(100vh)'
            dragDom.style.width = `calc(100vw - ${sildeWith}px)`
            dragDomBox.style.marginTop = 0
            dragDomBox.style.marginBottom = 0
            dragDomBox.style.left = menuWidth + 'px'
            dragDomBox.style.top = '50px'
            dragDomBox.style.height = 'calc(100vh)'
            dragDomBox.style.width = `calc(100vw - ${menuWidth}px)`
            dragDom.style.transition = 'all 0.1s'
            isFullScreen = true
            dialogHeaderEl.style.cursor = 'initial'
            dialogHeaderEl.onmousedown = null
            el.querySelector('.el-dialog').classList.add('fullScreen')
            setTimeout(() => {
              dragDom.style.transition = 'none'
            }, 100)
          } else {
            dragDom.style.height = 'auto'
            dragDom.style.width = nowWidth + 'px'
            dragDom.style.marginTop = nowMarginTop
            isFullScreen = false
            dragDom.style.marginBottom = '-50px'
            dialogHeaderEl.style.cursor = 'move'
            dragDom.style.transition = 'all 0.1s'
            dialogHeaderEl.onmousedown = moveDown
            el.querySelector('.el-dialog').classList.remove('fullScreen')
            setTimeout(() => {
              dragDom.style.transition = 'none'
            }, 100)
            // model.style.display = 'block'
          }
        }
  
        let resizeEl = document.createElement('div')
        dragDom.appendChild(resizeEl)
        //在弹窗右下角加上一个10-10px的控制块
        resizeEl.style.cursor = 'se-resize'
        resizeEl.style.position = 'absolute'
        resizeEl.style.height = '10px'
        resizeEl.style.width = '10px'
        resizeEl.style.right = '0px'
        resizeEl.style.bottom = '0px'
        let maxWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth
        let maxHeight =
          window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight
        resizeEl.onmousedown = (e) => {
          // 记录初始x位置
          if (!isFullScreen) {
            const clientX = e.clientX
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - resizeEl.offsetLeft
            const disY = e.clientY - resizeEl.offsetTop
  
            document.onmousemove = function (e) {
              e.preventDefault() // 移动时禁用默认事件
  
              // 通过事件委托，计算移动的距离
              const x = e.clientX - disX + (e.clientX - clientX) //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
              const y = e.clientY - disY
              //比较是否小于最小宽高
              if (x < maxWidth) {
                dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
              } else {
                x = maxWidth
              }
              if (y < maxHeight) {
                dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px'
              } else {
                y = maxHeight
              }
              // dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';
            }
            //拉伸结束
            document.onmouseup = function (e) {
              document.onmousemove = null
              document.onmouseup = null
            }
          }
        }
      }
    }
  })
  
  // 阻止多次点击重复提交
  Vue.directive('noMoreClick', {
    inserted(el, binding) {
      el.addEventListener('click', (e) => {
        el.classList.add('is-disabled')
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
          el.classList.remove('is-disabled')
        }, 1500)
      })
    }
  })